<template>
   <h1>vue3 写法</h1>
   <h1>名字：{{ myname }}</h1>
   <h1>数据：{{count}}</h1>
   <h1>计算属性：{{doubleCount}}</h1>
   <button @click="toAdd">加1</button>
   <h1>使用reactive</h1>
  <!-- vue3 对应diff算法 优化 在循环过程中可以不加key了  -->
   <h1 v-for="item in data.list">{{item}}</h1>
   <h1>{{data.city}}</h1>
   <h1>{{myage}}</h1>
   <button @click="change">改变reactive数据</button>

   <h1 v-for="(val,key,index) in data.car">{{key}}---{{val}}</h1>
   <button @click="addKey">新增属性</button>
</template>
<!-- vue3 用setup来代替了三个生命周期
 beforeCreate created beforeMount 
 setup 语法糖写法  vue3的最常用写法
  -->
<script  setup>
  //  vue3 创建响应式数据的方式1  ref()
  //！！ vue3的组合式 api 就是 使用哪些方法 导入哪些方法
  import {ref,computed,reactive} from 'vue'

  let count=ref(1) 
  let myname=ref('王天放')

  //2. vue3的方法  不写在methods内部  原生js写 setup 内部
  let toAdd=()=>{
    //  3 ref 访问值 和修改值 操作要加.value
    count.value++
  } 
  // vue3 computed方法 的计算属性 导入后使用
  let doubleCount=computed(()=>{

    return count.value*2

  })
  // ------------------------------------
  // vue3 创建响应数据的方法2 reactive()
  // reactive 创建的响应式数据 是一个对象
  // 对应内部可以放置多个数据 
  // 使用reactive 创建的响应式数据 .属性
  // 一般创建引用数据类型
  let data=reactive({
    list:["麻辣烫","火锅","烧烤"],
    city:"朝鲜",
    car:{
      name:"问界",
      price:30
    },
    age:18
  })
  // 添加需要的数据
  let addForm=reactive({
    name:"",
    age:0,
    sex:""
  })
  let change=()=>{
    data.city="中国"
  }
  // 用reactive创建的数据 做了一个计算属性
  let myage=computed(()=>{
    return data.age*2
  })
  // vue2的数据响应式 Object.defineProperty
  // vue3 数据响应式原理 Proxy代理 的set负责拦截数据 get负责赋值数据
  // vue2 和vue3 区别：由于vue2的Object.defineProperty  进入组件一次性的将
  //  data中的数据递归监听完毕,所以对象和数组新增属性页面无法及时更新，vue3使用Proxy代理，进入组件时，只对data中的数据进行监听，实现按需监听，所以新增属性页面可以及时更新

  let addKey=()=>{
    data.car.color="red" //vue3 数据内部对象新增属性 
  }


  

</script>
<!-- vite 搭建的项目 less 和 scss 直接使用 -->
<style lang="scss" scoped>
  
</style>